<template>
  <div>
    <div class="dimensional" v-if="!playtype">
      <div style="margin-top: 150px;">扫一扫付款(元)</div>
      <div style="color: #EB7A22;font-size:35px;font-weight:bold;">{{ playUrl.query.money }}</div>
      <div style="display: flex; justify-content: center; ">
        <div
          style="border: 1px solid #D5D5D5; padding: 10px; margin-top: 10px;width: 200px; height: 210px;"
        >
          <img
            style="width: 200px; height: 200px; object-fit: cover;"
            :src="imageUrl"
            alt
          />
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script setup>
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { payOrnot, getUsrInfo } from "@/utils/api/customerService/index.ts";
import { useStore } from "@/store/index";
const store = useStore();
const router = useRouter();
const playUrl = useRoute();
const imageUrl = ref("");
const playtype = ref(false);

let timer; // 声明在全局作用域
const initUserInfo = () => {
    getUsrInfo().then(res => {
        let data = JSON.parse(res.data.value || '{}').result;
        store.setUserInfo(data);
        localStorage.setItem("aiseo-user-info",JSON.stringify(data) );
      });
  }
const gopayOrnot = () => {
  let data = {
    order_num: playUrl.query.order_num
  };

  payOrnot(data).then(res => {
    const resData = JSON.parse(res.data.value);
    console.log(resData.result.trade_state, "resData.result.trade_state");
    if (resData?.result?.trade_state === "SUCCESS") {
      clearInterval(timer);
      console.log("成功");
      window.close();// 关闭当前窗口
      // 更新store中的数据
      initUserInfo()
      // router.back(); // 后退一页
      timer = undefined; 
    }
  });
};

gopayOrnot(); // 初次调用

if (process.client) {
  timer = setInterval(gopayOrnot, 5000); // 设置定时器
}
onMounted(() => {
  imageUrl.value = playUrl.query.imgUrl;
})
onUnmounted(() => {
  clearInterval(timer);
})
</script>
  
  <style lang="scss" scoped>
.dimensional {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  text-align: center;
}
</style>